// 引入 react 依赖
import React, { Component, useState } from 'react';
import { connect } from 'react-redux';
import { NativeEventEmitter, ScrollView, TextInput, NativeModules, Platform, StyleSheet, Text, View, Image, TouchableOpacity, Alert, Switch, ImageBackground } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import axios from 'axios';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import {  } from '../../../module/module.js'

// 引入样式
import Style from '../style.js';

// 引入公用组件
import { Layout,  Title, NetInfoScene, Results, RefreshScrollView, ScrollableTabBar } from '../../../components/index.js'

// 引入专用组件
import { } from '../components/index.js'

// 引入工具包

import { nblogo, classDefault } from '../../../util/images.js'
import { size, longitude, latitude, ScreenWidth } from '../../../util/utils.js'


export default function (props) {
    const { active, tabsNav, onPress } = props
    return (
        <View style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 20 }}>
            {
                tabsNav.map((item, index) => {
                    if (item.active == active) {
                        return (
                            <TouchableOpacity key={index} style={{ marginRight: 20, height: 44, justifyContent: 'center', }} onPress={() => onPress(item.active)}>
                                <View style={{ flexDirection: 'column', alignItems: 'center', position: 'relative' }} >
                                    <Text style={{ fontSize: 16, color: '#97A3FF', lineHeight: 22, }}>{item.name}</Text>
                                    <View style={{ width: 24, height: 3, borderRadius: 12, backgroundColor: "#7484FF", position: 'absolute', bottom: -5 }}></View>
                                </View>
                            </TouchableOpacity>
                        )
                    } else {
                        return (
                            <TouchableOpacity key={index} style={{ marginRight: 20, height: 44, justifyContent: 'center', }} onPress={() => onPress(item.active)}>
                                <View style={{}}>
                                    <Text style={{ fontSize: 16, color: '#8A90A8', lineHeight: 22, }}>{item.name}</Text>
                                </View>
                            </TouchableOpacity>
                        )
                    }
                })
            }
        </View>
    )

}
